<template>
  <section>
    <div class="container">
      <div class="shop-detail">
        <swiper auto height="640px" dots-position="center">
          <swiper-item class="black" v-for="(bannerlistItem,index) in bannersImg" :key="index">
            <img class="title fadeInUp animated imgbox" :src="bannerlistItem" alt="">
          </swiper-item>
        </swiper>
        <div class="container-title">
          <p class="title-des">
            {{shopdetail.name}}
          </p>
          <div class="money-box">
            <span class="money">¥{{shopdetail.discountPrice}}元</span>
            <span class="old-money">¥{{shopdetail.price}}</span>
            <span class="desc" v-if='shopdetail.promotion==1'>2人拼团</span>
            <span class="desc" v-if='shopdetail.promotion==1'>拼团立省</span>
          </div>
          <div class="all">
            <span class="express">
                   快递费用：{{shopdetail.postage}}
                 </span>
            <span class="kunc">库存：{{shopdetail.stock}}</span>
          </div>
        </div>
        <div class="tab-ok">
          <div class="tab-item-ok">
            <div class="img"><img src="../assets/ok.jpg" alt=""></div>
            <span class="des-tab">48小时发货</span>
          </div>
          <div class="tab-item-ok">
            <div class="img"><img src="../assets/ok.jpg" alt=""></div>
            <span class="des-tab">24小时服务</span>
          </div>
        </div>
        <div class="pin-box">
          <div class="title">正在拼团</div>
          <div class="section">拼团优享受，超实惠，成功发货失败退款</div>
          <div class="box-pin-tab" v-for="(lplItem,index) in shopdetail.lpl" :key="index">
            <div class="imgbox">
              <img :src="lplItem.headimgurl" alt="">
            </div>
            <div class="name">{{lplItem.nickname}}</div>
            <div class="text-p">还差一人即可拼团</div>
            <div class="go-ps" @click="gopin(shopdetail.promotion,lplItem.ssm,lplItem.userId)">拼团</div>
          </div>
        </div>
        <div class="detail">
          <p class="detail-title">图文详情</p>
          <p class="text-de">{{shopdetail.description}}</p>
          <div class="details">
            <div class="imgbox" v-for="(detailslistItem,index) in detailImgs" :key="index">
              <img class="imgbox" :src="detailslistItem" alt="">
            </div>
          </div>
        </div>
        <div class="footer" v-if='shopdetail.promotion==1'>
          <div class="box-footer">
            <div class="upold-btn" @click="popup('3')">
              <img src="../assets/cart.png" alt="">
              <div class="textip">购物车</div>
            </div>
            <div class="submit" @click="popup">
              <p class="price-t">¥{{shopdetail.discountPrice}}</p>
              <p class="text">单独购买</p>
            </div>
            <div class="pin" @click="popup(shopdetail.promotion)">
              <p class="price-t">¥{{shopdetail.promotionPrice}}</p>
              <p class="text">2人拼团</p>
            </div>
          </div>
        </div>
        <div class="footer" v-else>
          <div class="box-footer">
            <div class="upold-btn" @click="popup('3')">
              <img src="../assets/cart.png" alt="">
              <div class="textip">购物车</div>
            </div>
            <div class="submits" @click="popup">立即购买</div>
  
          </div>
        </div>
      </div>
      <div>
        <popup v-model="popupShow">
          <div class="popup1">
            <i class="fa fa-close"></i>
            <div class="product-info">
              <div class="img">
                <img :src="shopdetail.logo" alt="">
              </div>
              <div class="right">
                <div class="price">价格：￥
                  <span v-if="tuan!=1">{{price}}</span>
                  <span v-else>{{collagePrice}}</span>
                </div>
              </div>
            </div>
            <div class="pro-color" v-for="(propertyListItem,bb) in propertyList" :key="bb">
              <div class="title">{{propertyListItem.name}}</div>
              <div class="color-list">
                <div class="item vux-1px" @click="getnum(fromatItem.id,indexs,bb,propertyListItem.id)" v-for="(fromatItem,indexs) in fromat[propertyListItem.id]" :key="indexs" :class="{'active':indexs ==idx[bb]}">
                  {{ fromatItem.name}}
                </div>
              </div>
            </div>
            <group title="数量:">
              <x-number v-model="count" :min="1"></x-number>
            </group>
            <div class="number">库存：{{stock}}</div>
            <div class="btn" @click="goBuy">确定</div>
          </div>
        </popup>
      </div>
    </div>
  </section>
</template>

<script>
  import {
    SwiperItem,
    Swiper,
    Popup,
    XNumber,
    Group
  } from 'vux'
  export default {
    components: {
      SwiperItem,
      Swiper,
      Popup,
      XNumber,
      Group
    },
     data () {
	    return {
        changeValue: 0,
        shopdetail: {},
        bannersImg: [],
        detailImgs: [],
        shopText: {},
        idx: [],
        tuan: '',
        count: 1,
        checktext: "请选择尺码",
        popupShow: false,
        labelIds: '',
        act: false,
        inds: 0,
        stock: '', //库存
        price: "", //尺码价格
        collagePrice: '',
        propertyList: [],
        fromat: [],
        fromatOne: [],
        lengths: 0,
        jsApiParameters: '',
        orderId: '',
        b: false,
        ss: '',
	     }
     },
     created() {
        let title = "【发现好货】  晨烨超级购",
        desc = "商品详情",
        link = window.location.href;
        this.wxShare(title,desc,link)
     },
     mounted(){
       this.getShopInformation()
       this.getproperty()  //获取属性
     },
    methods:{
      goCart(){
        var data={
          productId:this.$route.query.shopId,
          productLabels:this.labelIds,
          count: this.count,
          userId: this.$route.query.userId
        }
        console.log(data)
        this.$axios.post('/device/shopCar/create', data).then(res => {
          console.log(res)
          if (res.data.code == 1000) {
            this.$vux.toast.text('添加购物车成功')
            console.log(res)
            self.$router.push({
              path: '/Cart',
              query: {
                userId: self.$route.query.userId
              }
            })
          }
  
        })
      },
      goBuy() { //支付
        var self = this
        let data = {
          count: self.count,
          totalPrice: '',
          productId: this.$route.query.shopId,
          subProductId: self.labelIds,
          indentType: 1
        }
        if (self.tuan == 1) {
          data.indentType = 2 //团购
          data.totalPrice = self.collagePrice * this.count
          data.ssm = this.ss
          console.log(data)
          this.$axios.post('/device/indent/placeOrder', data).then(res => {
            console.log(res)
            if (res.data.code == 1000) {
  
              self.b = true
              self.$router.push({
                path: '/SureOrder',
                query: {
                  userId: self.$route.query.userId,
                  orderNumber: res.data.data
                }
              })
            }
  
          })
        } else if (self.tuan == "3") {
          self.goCart()
  
        } else if (self.b) {
          self.b = true
        } else {
          data.totalPrice = self.price * this.count
          this.$axios.post('/device/indent/placeOrder', data).then(res => {
            console.log(res)
            if (res.data.code == 1000) {
  
              self.b = true
              self.$router.push({
                path: '/SureOrder',
                query: {
                  userId: self.$route.query.userId,
                  orderNumber: res.data.data
                }
              })
            }
  
          })
        }
      },
      popup(index) {
        this.popupShow = true;
        if (index == 1) {
          this.tuan = index
        } else if (index == '3') {
          this.tuan = index
        } else {
          this.tuan = ''
        }
      },
      gopin(index, ssm, id) {
  
        if (id != this.$route.query.userId) {
          if (index == 1) {
            this.popupShow = true;
            this.tuan = index
            this.ss = ssm
          }
        } else {
          this.$vux.toast.text('您以参与此单拼团')
        }
  
      },
      getproperty() {
        let self = this
        this.$axios.post('/device/property/enableList/' + this.$route.query.shopId).then(res => {
          if (res.data.code == 1000) {
            self.propertyList = res.data.data
            for (let i = 0; i < self.propertyList.length; i++) {
              // self.getformat(self.propertyList[i].id,i)
              self.fromat[self.propertyList[i].id] = self.fromat.concat(self.propertyList[i].labels)
            }
          }
  
        })
  
      },
      //  getformat(id,i){    //规格    
      //     let self=this
      //     new Promise(function (resolve, reject) {
  
      //         self.$axios.post('/device/propertyLabel/showList/'+id).then(res=>{
      //               if(res.data.code==1000){
      //                 self.lengths+=1
      //                 self.fromat[id]=self.fromat.concat(res.data.data)  //查出规格拼接
  
      //                 resolve(self.lengths);
      //               }
      //           })
      //       }).then(function (lengths){
      //         // if(lengths==self.propertyList.length){    //进来不执行函数
      //         //   self.getnum()
      //         // } 
      //     })
  
  
      //   },
      getnum(id, indexs, bb, bid) { //库存  
        let self = this
        this.idx[bb] = indexs
        this.idx = this.idx.concat([]) //一个新的数组不改变原新的数组
        this.getcheck(id, indexs, bb, bid)
  
      },
      getcheck(id, indexs, bb, bid) {
        var self = this
        this.checktext = ""
        var formatlist = self.fromat[self.propertyList[bb].id] //获取分类的列表
        for (let iq = 0; iq < formatlist.length; iq++) {
          if (formatlist[iq].checkout == true) {
            formatlist[iq].checkout = false
          }
  
        }
        self.fromat[self.propertyList[bb].id][indexs].checkout = true //选中
  
        self.getId(id, indexs, bb, bid)
      },
      getId(id, indexs, bb, bid) {
        var self = this
        self.labelIds = ""
        for (let i = 0; i < self.propertyList.length; i++) {
          for (let iq = 0; iq < self.fromat[self.propertyList[i].id].length; iq++) {
            if (self.fromat[self.propertyList[i].id][iq].checkout == true) {
              self.labelIds += self.fromat[self.propertyList[i].id][iq].id
            }
          }
        }
        if (self.propertyList.length > 1) {
          if (self.labelIds.length > 32) {
            self.getNumber()
          }
        } else {
          self.getNumber()
        }
  
      },
      getNumber() { //获取库存
        var self = this
  
        //   self.labelIds=self.labelIds.slice(0,self.labelIds.length-1)
        console.log(self.labelIds)
        this.$axios.post('/device/subProduct/get/' + this.$route.query.shopId + "/" + self.labelIds).then(res => {
          if (res.data.code == 1000) {
  
            this.price = res.data.data.price
            this.collagePrice = res.data.data.collagePrice
            this.stock = res.data.data.stock
          }
        })
  
      },
      getShopInformation() {
        let self = this
        this.$axios.post('/device/product/get/' + this.$route.query.shopId).then(res => {
          console.log(res)
          console.log("1111")
          if (res.data.code == 1000) {
            self.bannersImg = res.data.data.bannerImgs.split(",")
            self.detailImgs = res.data.data.detailImgs.split(",")
            this.shopdetail = res.data.data
            self.price = self.shopdetail.discountPrice
            self.stock = self.shopdetail.stock
          }
        })
      },
    }
  }
</script>

<style lang="less">
  .popup1 {
    .weui-cells:after {
      border: none;
    }
    .weui-cells__title {
      padding: 10px 30px;
      font-size: 30px;
      color: #444;
    }
    .weui-cells::before {
      border: none;
    }
    .weui-cell:before {
      border: none;
    }
    .weui-cell {
      padding: 10px 30px;
      font-size: 30px;
      .vux-cell-primary {
        height: 100%;
        align-items: center;
      }
      .vux-number-selector {
        height: 34px;
        line-height: 34px;
      }
      .vux-number-input {
        height: 34px;
        line-height: 34px;
      }
    }
  }
</style>

<style lang="less" scoped>
  .submits {
    flex: 1;
    text-align: center;
    color: #fff;
    padding: 10px;
    background: #ff1c4b;
    font-size: 36px;
    font-weight: 700;
  }
  
  .textip {
    color: #8f9294;
  }
  
  .box-pin-tab {
    display: flex;
    padding: 0 0 0 20px;
    background: #ffe5e5;
    margin: 10px 0;
    height: 94px;
    .name {
      flex: 1;
      text-align: left;
      padding-left: 40px;
      color: #ff5777;
      font-size: 36px;
      line-height: 94px;
    }
    .text-p {
      color: #F70968;
      padding-right: 50px;
      line-height: 94px;
      font-size: 20px;
    }
    .imgbox {
      width: 80px;
      display: flex;
      align-items: center;
      img {
        width: 80px;
        border-radius: 100%;
        height: 80px;
      }
    }
  }
  
  .pin-box {
    text-align: left;
    padding: 0 30px;
    border-bottom: 28px solid #e6e4e4;
    .title {
      line-height: 60px;
      height: 60px;
      font-size: 36px;
      font-weight: 800;
      color: #ff1c4b;
    }
    .go-ps {
      width: 80px;
      background: #ff2c2b;
      line-height: 94px;
      text-align: center;
      font-size: 30px;
      font-weight: 800;
      color: #fff;
    }
    .section {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 24px;
      color: #666;
    }
  }
  
  .tab-ok {
    height: 80px;
    display: flex;
    padding: 0 40px;
    border-bottom: 28px solid #e6e4e4;
    span {
      flex: 1;
      font-size: 26px;
      text-align: left;
    }
    .tab-item-ok {
      display: flex;
      align-items: center;
      flex: 1;
      .img {
        width: 50px;
        height: 80px;
        display: flex;
        align-items: center;
        img {
          width: 40px;
        }
      }
    }
  }
  
  .desc {
    font-size: 24px;
    height: .32rem;
    line-height: .32rem;
    padding: 0 .08rem;
    text-align: center;
    background-color: rgb(255, 232, 238);
    color: rgb(255, 34, 85);
  }
  
  .popup1 {
    position: relative;
    background-color: #fff;
    text-align: left;
    .weui-cell {
      padding: 10px 30px;
      font-size: 30px;
      .vux-cell-primary {
        height: 100%;
        align-items: center;
      }
      .vux-number-selector {
        height: 34px;
        background: #123;
        line-height: 34px;
      }
      .vux-number-input {
        height: 34px;
        line-height: 34px;
      }
    }
    .number {
      padding: 0 30px;
      font-size: 26px;
    }
    .fa-close {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 150%;
    }
    .product-info {
      padding: 34px 0 0 25px;
      align-items: center;
      margin-bottom: 40px;
      .img {
        width: 170px;
        height: 170px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      display: flex;
      .right {
        margin-left: 37px;
        .price {
          font-size: 30px;
          color: #222;
        }
        .select {
          font-size: 28px;
          color: #888888;
        }
      }
    }
    .pro-color {
      padding-left: 25px;
      .title {
        font-size: 30px;
        color: #444;
        margin-bottom: 25px;
      }
      &.pro-size {
        margin-top: 32px;
      }
      .color-list {
        display: flex;
        flex-wrap: wrap;
        .item {
          line-height: 57px;
          text-align: center;
          height: 57px;
          min-width: 143px;
          margin-bottom: 25px;
          font-size: 26px;
          color: #444;
          margin-right: 30px;
          box-sizing: border-box;
          padding: 0 20px;
          &.vux-1px:before {
            border: 1px solid #444;
          }
          &.active {
            color: #fe4543;
            border-color: #fe4543;
            &.vux-1px:before {
              border: 1px solid #fe4543;
            }
          }
        }
      }
    }
    .btn {
      width: 100%;
      margin-top: 81px;
      height: 93px;
      line-height: 93px;
      text-align: center;
      font-size: 26px;
      background-color: #FB4749;
      color: #fff;
    }
  }
  
  .upold-btn {
    text-align: center;
    color: #c7c7c7;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    a {
      color: #c7c7c7;
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
    }
    img {
      height: 38px;
      width: 38px;
    }
  }
  
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    height: 100px;
    width: 100%;
  }
  
  .pin {
    flex: 0 0 50%;
    text-align: center;
    color: #fff;
    padding: 10px;
    background: #ff1c4b;
    .price-t {
      font-size: 36px;
      font-weight: 700;
      line-height: 1.2;
    }
    .text {
      font-size: 28px;
    }
  }
  
  .submit {
    flex: 0 0 34%;
    text-align: center;
    color: #ff1c4b;
    padding: 10px;
    background: #ffd8e0;
    .price-t {
      font-size: 36px;
      font-weight: 700;
      line-height: 1.2;
    }
    .text {
      font-size: 28px;
    }
  }
  
  .upold-btn {
    flex: 0 0 25%;
    color: #ff1c4b;
  }
  
  .box-footer {
    display: flex;
    width: 100%;
    background: #fff;
    height: 100px;
    border-top: 1px solid #c7c7c7;
  }
  
  .container {
    padding-bottom: 100px;
  }
  
  .text-de {
    font-size: 24px;
    text-align: left;
  }
  
  .detail-title {
    font-size: 40px;
    color: #444444;
    line-height: 90px;
    font-weight: 800;
    text-align: left;
  }
  
  .detail {
    padding: 0 30px;
    padding-bottom: 100px;
  }
  
  .kunc {
    font-size: 30px;
    color: #999999;
    float: right;
  }
  
  .all {
    padding-bottom: 20px;
  }
  
  .express {
    font-size: 30px;
    color: #999999;
  }
  
  .container-title {
    padding: 0 30px;
    border-bottom: 2px solid #cacaca;
    text-align: left;
  }
  
  .title-des {
    font-size: 36px;
    color: #222;
    line-height: 1.2;
    font-weight: 800;
    text-align: left;
    padding: 20px 0;
  }
  
  .money-box {
    line-height: 70px;
    .money {
      font-size: 44px;
      font-weight: 800;
      color: #ff2b2b;
    }
    .old-money {
      font-size: 28px;
      color: #999999;
      text-decoration: line-through;
      padding-left: 34px;
    }
  }
  
  .imgbox {
    width: 100%;
    min-height: 100%;
  }
  
  .title {
    height: 80px;
    line-height: 80px;
    color: #222222;
    font-size: 28px;
  }
  
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  
  .vux-indicator.custom-bottom {
    bottom: 30px;
  }
  
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  
  .fadeInUp {
    animation-name: fadeInUp;
  }
  
  .swiper-demo-img img {
    width: 100%;
  }
</style>
